<template>
  <div class="app-container home">
    <el-row :gutter="20" class="header">
      <el-col :sm="24" :lg="12">
        <!-- <h1 style="color: black; float: center">家教服务系统</h1> -->
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20" class="modules">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="module" shadow="hover">
          <div slot="header" class="clearfix">
            <span>教学订单</span>
          </div>
          <div class="body">
            <p>查看和管理您的教学订单，确保每个订单都能得到及时处理。</p>
            <el-button type="primary" @click="goTarget('/orders')"
              >查看订单</el-button
            >
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="module" shadow="hover">
          <div slot="header" class="clearfix">
            <span>双向评价</span>
          </div>
          <div class="body">
            <p>教师和学生可以互相评价，帮助我们提升服务质量。</p>
            <el-button type="primary" @click="goTarget('/reviews')"
              >进行评价</el-button
            >
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="module" shadow="hover">
          <div slot="header" class="clearfix">
            <span>平台留言</span>
          </div>
          <div class="body">
            <p>如有任何问题或建议，请随时在此留言，我们会尽快回复您。</p>
            <el-button type="primary" @click="goTarget('/messages')"
              >留言</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="modules">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="module" shadow="hover">
          <div slot="header" class="clearfix">
            <span>辅导需求</span>
          </div>
          <div class="body">
            <p>发布您的辅导需求，寻找合适的家教老师。</p>
            <el-button type="primary" @click="goTarget('/tutoring-requests')"
              >发布需求</el-button
            >
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="module" shadow="hover">
          <div slot="header" class="clearfix">
            <span>家教申请</span>
          </div>
          <div class="body">
            <p>如果您是家教老师，欢迎申请加入我们的团队。</p>
            <el-button type="primary" @click="goTarget('/tutor-application')"
              >申请家教</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background-image: url("background.jpg"); /* 替换为你的背景图片路径 */
  background-size: cover;
  background-position: center;
  padding: 20px;
  border-radius: 8px;

  .header {
    text-align: center;
    h1 {
      font-size: 36px;
      color: #fff; /* 修改为适合背景的颜色 */
    }
    .intro {
      font-size: 16px;
      color: #ddd; /* 修改为适合背景的颜色 */
      margin-bottom: 10px;
    }
  }

  .modules {
    margin-top: 20px;

    .module {
      background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
      border-radius: 8px;
      transition: box-shadow 0.3s;
      &:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }

      .body {
        padding: 20px;
        p {
          margin-top: 10px;
          color: #444;
        }
      }
    }
  }
}
</style>
